<html>
<head>
<#include "/freemarker/fw/meta_top.ftl">
    <title>Book XTime</title>
<#include "/freemarker/fw/load_static.ftl">
    <style>
        body{
            background-color: #e9eaed;
        }
        .poto {
            height: 160px;
            padding-top: 80px;
            background: #58e;
            background-size: cover;
        }

        .poto img {
            float: left;
            margin-left: 10%;
            width: 156px;
            height: 156px;
            border: 2px solid #fff;
        }

        .poto h3 {
            display: inline-block;
            float: left;
            color: #fff;
            background-size: cover;
            background: #393939;
            padding: 0px 2px;
            box-shadow: 0px 0px 10px 5px #393939;
            margin-left: 10px;
        }

        .book-rec {
            display: inline-block;
            float: left;
            width: 50%;
        }

        .book-rec .book {
            float: left;
            width: 32px;
            height: 36px;
            border: 2px solid #e9eaed;
            margin: 3px;
        }

        .book-rec .book img {
            width: 32px;
            height: 36px;
        }

        #mainTabs>li{
            float: right;
            margin-top: -38px;
        }
        .motto{
            display: inline-block;
            padding: 5px;
            font-size: 14px;
            width: 50%;
        }

        .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
            background-color: transparent;
        }

    </style>
</head>
<body>
<#include "/freemarker/fw/navbar_top.ftl">
<div class="container">
    <div class="row poto" style="background: ${someone.userInfo.pageCover};background-image: url(${someone.userInfo.pageCover})">
        <img src="${someone.avatar}">

        <h3>${someone.nickname}</h3>

        <p></p>
    </div>
        <div class="book-rec" style="clear: right">
            <span class="book">
                <img src="/asset/images/default_book_cover_0.jpg">
            </span>
            <span class="book">
                <img src="/asset/images/default_book_cover_0.jpg">
            </span>
            <span class="book">
                <img src="/asset/images/default_book_cover_0.jpg">
            </span>
            <span class="book">
                <img src="/asset/images/default_book_cover_0.jpg">
            </span>
        </div>
        <p class="motto">${someone.userInfo.motto}</p>

    <div class="row">
        <div class="col-lg-12">
            <ul id="mainTabs" class="nav nav-tabs" style="width: 100%">
                <li class=""><a href="#timeline" data-toggle="tab">时间线</a></li>
                <li class="active"><a href="#profile" data-toggle="tab">简介</a></li>
                <li class=""><a href="#home" data-toggle="tab">他的主页</a></li>
                <#--<li class="dropdown">-->
                    <#--<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b-->
                            <#--class="caret"></b></a>-->
                    <#--<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">-->
                        <#--<li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>-->
                        <#--<li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>-->
                    <#--</ul>-->
                <#--</li>-->
            </ul>
            <div id="mainTabContent" class="tab-content">
                <div class="tab-pane fade" id="home">

                </div>
                <div class="tab-pane fade active in" id="profile">
                    <#include "/freemarker/space/profile.ftl">
                </div>
                <div class="tab-pane fade" id="timeline">

                </div>
                <div class="tab-pane fade" id="dropdown2">

                </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $("#mainTabs.nav-tabs").on("click", function(e){
                var $tabPane = $($(e.target).attr("href"));
                console.log($($tabPane));
//                if(!!$tabPane.html().trim()){
//                    return;
//                }
                var jqxhr = $.get("/space/" + $(e.target).attr("href").substr(1) + "/" + ${someone.id});
                jqxhr.done(function(response){
                    $tabPane.html($(response));
                });
                jqxhr.fail(function(){
                    console.log(arguments);
                })
            });
        });
    </script>
</div>

</body>
</html>